<template>
	<view class="content">
		<view class="nav">
			<view class="nav-bg" :style="[{ opacity: opacityVal}]"></view>
			<u-navbar :fixed="false" bgColor="transparent" leftIconColor="#fff" :autoBack="true">
			</u-navbar>
		</view>

		<view class="swiper-con">
			<u-swiper :list="swiperList" height="750rpx" @change="e => currentNum = e.current" :radius="0" circular
				:autoplay="false" indicatorStyle="right: 20px">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="detail-top">
			<view class="flex-row">
				<view style="color: #E93325;">¥{{pageData.costPrice}}</view>
				<view class="top-tag" v-if="pageData.vip">
					<view style="font-size: 20rpx;">会员价</view>
					<view style="margin-left: 8rpx;">¥{{pageData.vip}}</view>
				</view>
				<!-- <view style="font-size: 23rpx;color: #999999;margin-left: auto;">已售：145件</view> -->
			</view>
			<view class="top-title">
				{{pageData.name}}
			</view>
			<view class="flex-spe" style="margin-top: 23rpx;">
				<view>库存：{{pageData.count}}件</view>
				<view>规格：{{pageData.spc}}</view>
				<view>重量：{{pageData.weight}}斤</view>
			</view>
			<view class="flex-spe">
				<view>类型：{{pageData.typeName}}</view>
				<view>是否称重：{{pageData.sta==2?'是':'否'}}</view>
				<view v-if="pageData.price">配送价：￥{{pageData.price}}</view>
			</view>
			<view class="flex-spe">
				<view>供应商：{{pageData.supplierName}}</view>
			</view>
		</view>
		<view class="detail-bom">
			<view>商品详情</view>
			<view style="width: 100%;margin-top: 23rpx;">
				<u-parse :content="pageData.detail"></u-parse>
			</view>

		</view>
		<!-- <view class="submit-but" v-if="pageData.audit==0">
			<view class="add-cal" @click="goAudit('2')">审核不通过</view>
			<view class="add-cal" @click="goAudit('1')"
				style="border: none;background-color: #2FCC71;color: #ffffff;margin-left: 31rpx;">审核通过
			</view>
		</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				opacityVal: 0,
				currentNum: 0,
				swiperList: [],
				pageData: {},
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getList(option.id)
		},
		onPageScroll(e) {
			// console.log("滚动距离为：" + e.scrollTop);
			let top = e.scrollTop;
			this.opacityVal = top > uni.upx2px(750) ? 1 : top * 0.002;
			// console.log(this.opacityVal);


		},
		methods: {
			async getList(id) {
				let res = await this.$apis.procurement.getGoods(id)
				let item = res.data
				this.swiperList = item.pic.split(',')
				if (item.mp4) {
					this.swiperList.unshift(item.mp4)
				}
				this.pageData = item

			},
			async goAudit(num) {
				let res = await this.$apis.procurement.audit({
					audit: num,
					id: this.pageData.id,

				})
				uni.showToast({
					title: '操作成功',
					icon: 'success',
					duration: 1500
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: calc(130rpx + env(safe-area-inset-bottom) / 2) !important;
	}

	.nav {
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
	}

	.nav-bg {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #2FCC71;
	}

	.detail-bom {
		width: 688rpx;
		background-color: #FFFFFF;
		border-radius: 19rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0 auto;
		color: #333333;
		font-size: 31rpx;
		padding: 23rpx;
		box-sizing: border-box;

	}

	.detail-top {
		width: 688rpx;
		padding: 23rpx;
		background: #FFFFFF;
		border-radius: 19rpx;
		margin: 42rpx auto;
		box-sizing: border-box;
	}

	.flex-row {
		display: flex;
		align-items: center;
		font-size: 27rpx;
	}

	.top-tag {
		padding: 8rpx 15rpx;
		display: flex;
		align-items: flex-start;
		font-size: 27rpx;
		background: #E93325;
		border-radius: 25rpx;
		color: #FFFFFF;
		margin-left: 25rpx;
	}

	.flex-spe {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 15rpx;
		color: #666666;
		font-size: 23rpx;
		padding-right: 100rpx;
	}

	.top-title {
		width: 100%;
		margin-top: 15rpx;
		font-weight: 500;
		color: #333333;
		font-size: 31rpx;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.add-cal {
		width: 329rpx;
		height: 77rpx;
		border-radius: 38rpx;
		border: 1px solid #DEDEDE;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999999;
		font-size: 27rpx;
	}

	.swiper-con {
		width: 750rpx;
		height: 750rpx;
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>